<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <title>首页</title>
</head>
<link rel="icon" href="/cweb/img/logo.png" type="image/x-icon"/>
<!-- Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="/cweb/css/index.css" rel="stylesheet">
<!-- jQuery文件 在bootstrap.min.js之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=8b94839828585bafe042401878606ef7"></script>
<body>
<div class="app">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid navbar_content">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand navbar_logo_content">
                    <img src="/cweb/img/logo.png" height="50px" width="50px">&nbsp;&nbsp;鑫贝网络科技有限公司
                </div>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav navbar_menu">
                    <li id="shou_ye"><a href="#" onclick="loadCenterPage('/cweb/html/shou_ye.html','shou_ye')">首页</a>
                    </li>
                    <li id="it_server">
                        <a href="#" onclick="loadCenterPage('/cweb/html/shou_ye.html','it_server')">IT服务</a>
                    </li>
                    <li id="product_produce">
                        <a href="#" onclick="loadCenterPage('/cweb/html/shou_ye.html','product_produce')">产品研发</a>
                    </li>
                    <li id="about_us">
                        <a href="#" onclick="loadCenterPage('/cweb/html/about_us.html','about_us')">关于我们</a>
                    </li>
                    <li id="contract_us">
                        <a href="#" onclick="loadCenterPage('/cweb/html/contract_us.html','contract_us')">联系我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="center_content"></div>
    <div class="footer_content">
        <h3>联系我们</h3>
        <p>地址：武汉市洪山区野芷湖南路保利心语3期</p>
        <p>邮箱：ljy51036@126.com</p>
        <p>电话：15671677812</p>
        <p class="copyright">Copyright © 2015-2025 www.yuanlinb.com All Rights Reserved.</p>
    </div>
</div>

<script>

    $(function () {
        // 默认加载首页
        loadCenterPage('/cweb/html/shou_ye.html', 'shou_ye');
        document.getElementById("example-navbar-collapse").addEventListener('click', function () {
            $('#example-navbar-collapse').removeClass('in');
        });
    });

    // 加载中间的页面内容
    function loadCenterPage(path, activeId) {
        activeLi(activeId);
        $('.center_content').load(path);
    }

    // 选中导航栏
    function activeLi(id) {
        $('#' + id).addClass('active');
        let liArr = ['shou_ye', 'it_server', 'product_produce', 'about_us', 'contract_us'];
        for (let i in liArr) {
            if (liArr[i] != id) {
                $('#' + liArr[i]).removeClass('active');
            }
        }
    }

</script>

</body>
</html>